Revision:
<div class="container animate flip">
<div class="one animate pop delay-1"></div>
<div class="two animate slide delay-2"></div>
<div class="three animate blur delay-3"></div>
<div class="four animate grow delay-4"></div>
<div class="five animate splat delay-5"></div>
</div>
<style>
.container {background: deepskyblue; margin-left:5vw; border-radius: 10vw; width: 52vw; height: 12vw; position: relative;}
.container div {height: 8vw; width: 8vw; position: absolute; border-radius: 5vw; top: 2vw;}
.container .one {background: #69143E; left: 1vw;}
.container .two {background: #FF5F36; left: 10vw;}
.container .three {background: #F9A229; left: 20vw;}
.container .four {background: #EDDE2E; left: 30vw;}
.container .five {background: #F4E4C1; left: 40vw;}
.animate {animation-duration: 4s; animation-delay: 0.5s; animation-name: animate-fade; animation-timing-function: cubic-bezier(.26,.53,.74,1.48); animation-fill-mode: backwards; }
.animate.fade {animation-name: animate-fade; animation-timing-function: ease;}
@keyframes animate-fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate.pop {animation-name: animate-pop;}
@keyframes animate-pop {
0% {opacity: 0; transform: scale(0.5, 0.5);}
100% {opacity: 1;transform: scale(1, 1);}
}
.animate.blur {animation-name: animate-blur; animation-timing-function: ease;}
@keyframes animate-blur {
0% {opacity: 0; filter: blur(1.5vw);}
100% { opacity: 1; filter: blur(0vw);}
}
.animate.glow {animation-name: animate-glow; animation-timing-function: ease;}
@keyframes animate-glow {
0% {opacity: 0; filter: brightness(3) saturate(3); transform: scale(0.8, 0.8); }
100% { opacity: 1; filter: brightness(1) saturate(1); transform: scale(1, 1);}
}
.animate.grow {animation-name: animate-grow;}
@keyframes animate-grow {
0% {opacity: 0; transform: scale(1, 0); visibility: hidden;}
100% {opacity: 1; transform: scale(1, 1);}
}
.animate.splat {animation-name: animate-splat;}
@keyframes animate-splat {
0% {opacity: 0; transform: scale(0, 0) rotate(20deg) translate(0, -30px);}
70% { opacity: 1; transform: scale(1.1, 1.1) rotate(15deg);}
85% {opacity: 1; transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);}
100% {opacity: 1; transform: scale(1, 1) rotate(0) translate(0, 0);}
}
.animate.roll {animation-name: animate-roll;}
@keyframes animate-roll {
0% {opacity: 0; transform: scale(0, 0) rotate(360deg);}
100% {opacity: 1; transform: scale(1, 1) rotate(0deg);}
}
.animate.flip {animation-name: animate-flip;
transform-style: preserve-3d; perspective: 1000px;}
@keyframes animate-flip {
0% {opacity: 0; transform: rotateX(-120deg) scale(0.9,0.9);}
100% {opacity: 1; transform: rotateX(0deg) scale(1,1);}
}
.animate.spin {animation-name: animate-spin;
transform-style: preserve-3d; perspective: 1000px;}
@keyframes animate-spin {
0% {opacity: 0; transform: rotateY(-120deg) scale(0.9,0.9);}
100% {opacity: 1; transform: rotateY(0deg) scale(1,1);}
}
.animate.slide { animation-name: animate-slide; }
@keyframes animate-slide {
0% {opacity: 0; transform: translate(0,20px);}
100% {opacity: 1; transform: translate(0,0);}
}
.animate.drop { animation-name: animate-drop; animation-timing-function: cubic-bezier(.77,.14,.91,1.25);}
@keyframes animate-drop {
0% {opacity: 0; transform: translate(0,-300px) scale(0.9, 1.1);}
95% {opacity: 1; transform: translate(0,0) scale(0.9, 1.1); }
96% {opacity: 1; transform: translate(10px,0) scale(1.2, 0.9);}
97% {opacity: 1; transform: translate(-10px,0) scale(1.2, 0.9);}
98% {opacity: 1; transform: translate(5px,0) scale(1.1, 0.9);}
99% {opacity: 1; transform: translate(-5px,0) scale(1.1, 0.9);}
100% {opacity: 1; transform: translate(0,0) scale(1, 1);}
}
/* Animation Delays */
.delay-1 {animation-delay: 0.6s;}
.delay-2 {animation-delay: 0.7s;}
.delay-3 {animation-delay: 0.8s;}
.delay-4 {animation-delay: 0.9s;}
.delay-5 {animation-delay: 1s;}
.delay-6 {animation-delay: 1.1s;}
.delay-7 {animation-delay: 1.2s;}
.delay-8 {animation-delay: 1.3s;}
.delay-9 {animation-delay: 1.4s;}
.delay-10 {animation-delay: 1.5s;}
.delay-11 {animation-delay: 1.6s;}
.delay-12 {animation-delay: 1.7s;}
.delay-13 {animation-delay: 1.8s;}
.delay-14 {animation-delay: 1.9s;}
.delay-15 {animation-delay: 2s;}
@media screen and (prefers-reduced-motion: reduce) {
.animate {animation: none !important;}
}
</style>
<div class="spec">
<div class="first"></div>
<div class="second"></div>
<div>
<div class="third delay_16"></div>
<div class="third delay_17"></div>
<div class="third delay_18"></div>
</div>
<div>
<h3 class="fourth pop_one delay21">One!</h3>
<h3 class="fourth pop_one delay20">Two!</h3>
<h3 class="fourth pop_one delay19">Three!</h3>
</div>
</div>
<style>
.line-up{display: flex; flex-flow: row nowrap; width: 90vw; margin-left: 5vw; gap: 2vw;}
.first{margin-left: 2vw; background: green; height: 20vw; width: 20vw; border-radius:15%;}
.first {top:5%; animation-duration:15s; animation-name: being_first; animation-delay: 0.5s; transition: all linear; animation-fill-mode: backwards; }
@keyframes being_first {
0%, 100% {opacity: 0; transform: scale(1);}
50% {opacity: 1; transform: scale(0.5);}
}
.second {margin:2vw; background: #ff7a18; height: 10vw; width: 10vw; border-radius: 100%;}
.second{animation-name: being_second; animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48); animation-duration: 15s; transition: 1s all linear; }
@keyframes being_second {
0%, 100% {transform: translateX(-5vw);}
50% {transform: translateX(6vw);}
}
.third{margin-left: 2vw; background: deepskyblue; height: 5vw; width: 10vw; }
.third{animation-duration: 1s; animation-delay: 0.5s; animation-name: animate_fade; animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48); animation-fill-mode: backwards; }
.third{animation-name: animate_glow; animation-timing-function: ease;}
@keyframes animate_fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes animate_glow {
0%, 100% { opacity: 0; filter: brightness(3) saturate(3);transform: scale(0.8, 0.8); border-radius:5%;}
50% {opacity: 1; filter: brightness(1) saturate(1); transform: scale(1, 1); border-radius:50%/60%;}
}
.delay_16 {animation-delay: 0.4s;}
.delay_17 {animation-delay: 0.8s;}
.delay_18 {animation-delay: 1.2s;}
.fourth{animation-duration: 0.5s; animation-name: fading; animation-delay: 0.5s; animation-fill-mode: backwards;}
@keyframes fade {
0% {opacity: 0; }
100% { opacity: 1; }
}
.pop_one{animation-name:pop; animation-timing-function: cubic-bezier(.26,.53,.74,1.48);}
@keyframes pop {
0% {opacity: 0; transform: scale(0.5, 0.5); }
100% {opacity: 1; transform: scale(1, 1);}
}
.delay19 {color:black; animation-delay: 0.4s;}
.delay20 {color: yellow; animation-delay: 0.8s;}
.delay21 {color: red; animation-delay: 1.2s;}
</style>
code:
<div class="spec">
<div class="bubble_1"></div>
<div class="bubble_2"></div>
</div>
<style>
.stretch{display: flex; width: 40vw; flex-flow: row nowrap; gap: 10vw;margin-left: 10vw;}
.bubble_1{height: 6vw; width: 6vw; margin: 2vw; animation-name: stretch;
animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0;
animation-direction: alternate;animation-iteration-count: infinite;
animation-fill-mode: none; animation-play-state: running;}
.bubble_2{height: 10vw; width: 10vw; margin: 2vw; animation-name: stretch;
animation-duration: 2.5s;
animation-timing-function: ease-in; animation-delay: 0; animation-direction: alternate;
animation-iteration-count: infinite; animation-fill-mode: none;
animation-play-state: running;}
@keyframes stretch {
0% { transform: scale(.3) rotate(20deg); background-color: red;border-radius: 100%;}
50% {background-color: orange; }
100% {transform: scale(1.5) rotate(-45deg); background-color:green; }
}
</style>
<div class="spec">
<div class="bubble_1a"></div>
<div class="bubble_2a"></div>
<div class="bubble_3a"></div>
</div>
<style>
.bubble_1a{height: 3vw; width: 3vw; animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate;
border-radius: 100%;}
.bubble_2a{height: 10vw; width: 10vw; animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate;
border-radius: 100%;}
.bubble_3a{height: 3vw; width: 3vw; animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate;
border-radius: 100%;}
@keyframes pulse {
0% {background-color: black;}
50% {background-color: yellow;}
100%{background-color:red;}
}
@keyframes nudge {
0%, 100% {transform: translate(0, 5vw);}
50% {transform: translate(75vw, 5vw);}
80% {transform: translate(5vw, 0vw);}
}
</style>
<div class="frame">
<div class="growing"></div>
</div>
<style>
.frame {margin:0; height:40vh; display:grid; place-items:center; background:lightblue;
overflow:hidden;}
.growing {width:10vw; height:10vw; position:relative; clip-path:inset(-50vh 0);}
.growing:before { content:""; display:block; width:400%; height:100%; background:
/*1*/
radial-gradient(farthest-side,#639510 97%,#0000) 12.5% 65%/12px 9px,
linear-gradient(#996b52 0 0) 9% 80%/9.4% 9%,
linear-gradient(#996b52 0 0) 10% 100%/7% 25%,
linear-gradient(#639510 0 0) 12.5% 100%/5px 36%,
/*2*/
radial-gradient(farthest-side,#639510 97%,#0000) 35.5% 50%/15px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 38% 64%/15px 10px ,
linear-gradient(#996b52 0 0) 35.5% 80%/9.4% 9%,
linear-gradient(#996b52 0 0) 36% 100%/7% 25%,
linear-gradient(#639510 0 0) 37% 100%/5px 52%,
/*3*/
radial-gradient(farthest-side,#fb3e4c 98%,#0000) 64.5% 40.5%/10px 9px,
radial-gradient(farthest-side at bottom,#0000 calc(100% - 5px),#639510 0 100%,#0000)
63.6% 34%/20px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 61% 50%/15px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 63.5% 64%/15px 10px ,
linear-gradient(#996b52 0 0) 63.5% 80%/9.4% 9%,
linear-gradient(#996b52 0 0) 63.1% 100%/7% 25%,
linear-gradient(#639510 0 0) 62% 100%/5px 62%,
/*4*/
radial-gradient(farthest-side at 50% 4px,#fb3e4c 98%,#0000) 88.1% 17.5%/17px 13px,
radial-gradient(farthest-side,#639510 97%,#0000) 87% 50%/15px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 89.5% 38%/15px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 89.5% 64%/15px 10px,
linear-gradient(#996b52 0 0) 91% 80%/9.4% 9%,
linear-gradient(#996b52 0 0) 90% 100%/7% 25%,
linear-gradient(#639510 0 0) 87.5% 100%/5px 77%;
background-repeat:no-repeat; animation:m 4s .5s both; }
.growing:after { content: ""; position: absolute; inset: -50vh 49px 42px 54px;
background:
conic-gradient(at 2px 50%,#0000 270deg,#fff 0)0 0/8px 10px,
conic-gradient(at 2px 50%,#0000 270deg,#fff 0)4px 5px/8px 10px;
animation:s 4s .5s both; }
@keyframes m{
0%,20% {transform:translate(0%)}
33.33%,53.33% {transform:translate(-24%)}
66.66%,86.66% {transform:translate(-49.5%)}
100%{transform:translate(-74.5%)}
}
@keyframes s {
0% {inset: -100vh 49px 100vh 54px}
10% {inset: -100vh 49px 42px 54px;opacity:1}
20% {inset: -100vh 49px 42px 54px;opacity:0}
20.01%, 33.33% {inset: -100vh 49px 100vh 54px;opacity:1}
43.33% {inset: -100vh 49px 42px 54px;opacity:1}
53.33% {inset: -100vh 49px 42px 54px;opacity:0}
53.34%, 66.66% {inset: -100vh 49px 100vh 54px;opacity:1}
76.66% {inset: -100vh 49px 42px 54px;opacity:1}
86.66%, 100%{inset: -100vh 49px 42px 54px;opacity:0}
}
</style>